<template>
	<!-- 核销记录 -->
	<view class="page">
		<mescroll-uni @getData="getData" ref="mescroll" top="0">
			<block slot="list">
				<view class="item" v-if="dataList.length!=0">
					<view class="item-detail" v-for="(item,index) in dataList" :key="index">
						<view class="header">
							<view class="color-tip font-size-goods-tag">核销码：{{item.verify_code}}</view>
							<view class="color-tip align-right font-size-goods-tag">核销员：{{item.verifier_name}}</view>
						</view>
						<view class="xian"></view>
						<view class="body">
							<view class="content-item" v-for="(ites,item_index) in item.item_array" :key="item_index">
								<view class="img-wrap">
									<image :src="$util.img(ites.img)" @error="imageError(typeIndex, index, citemIndex)" mode="aspectFill"></image>
								</view>
								<view class="info-wrap">
									<view class="name-wrap">
										<view class="goods-name font-size-tag">{{ites.name}}</view>
										<view class="font-size-goods-tag color-tip">核销时间:{{ $util.timeStampTurnTime(item.verify_time)}}</view>
									</view>
									<view class="money-wrap">
										<view class="align-right color-tip font-size-goods-tag">
											<text class="iconfont iconclose font-size-goods-tag"></text>
											<text>{{ites.num}}</text>
											<text class="refund-text">{{ites.refund_status_name}}</text>
										</view>
									</view>
								</view>
								<view class="money-wrap">
									<view><text class="color-top font-size-goods-tag">￥</text><text class="font-size-base color-top">{{ites.price}}</text>
																		</view>
	
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="dataList.length==0">
					<image :src="$util.img('/upload/uniapp/common-empty.png')" mode="widthFix"></image>
					<text>暂时没有更多的核销数据了</text>
				</view>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				token: '',

			}
		},
		onLoad() {
			if (!uni.getStorageSync('token')) {
				this.$refs.login.open('/pages/member/index/index');
			} else {
				this.token = uni.getStorageSync('token')
			}
			uni.setNavigationBarTitle({
				title: '核销记录'
			});
		},
		methods: {
			getData(mescroll) {
				this.mescroll = mescroll
				this.$api.sendRequest({
					url: '/api/Verify/lists',
					data: {
						token: this.token,
						// site_id: this.$config.siteId,
						verify_type: 'community',
						page: mescroll.num,
						page_size: mescroll.size
					},
					success: res => {
						console.log(res)
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = this.dataList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.color-top{
			color: #FF4544;
		}
	.page {
		.item {
			.item-detail {
				margin: 24rpx;
				border-radius: $border-radius;
				background: #fff;
				position: relative;
				padding: 30rpx;
			}

			.header {
				display: flex;
				padding-bottom: 30rpx;
				justify-content: space-between;
				align-items: center;

				view {
					line-height: 1;
					max-width: 50%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.xian {
				width: 100%;
				border: 0.5px solid #eee;
			}

			.body {

				.content-item {
					padding-bottom: 24rpx;
					border-top: 2rpx solid $color-line;
					display: flex;
					padding-top: 24rpx;

					.img-wrap {
						width: 120rpx;
						height: 120rpx;
						border-radius: $border-radius;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info-wrap {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 100%;
						padding-right: 23rpx;

						.name-wrap {
							flex: 1;
							padding-left: 23rpx;

							.goods-name {
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
								line-height: 1.5;
								color: #000000;
								font-size: $font-size-base;
							}
						}

						.money-wrap {
							margin-top: 20rpx;
							padding: 0 23rpx;
							display: flex;
							justify-content: space-between;
							width: 100%;
							align-items: center;

							&>view {
								line-height: 1;

								.refund-text {
									color: red;
									font-weight: normal;
									margin-left: 30rpx;
								}
							}

							.unit {
								font-weight: normal;
								font-size: $font-size-tag;
								margin-right: 2rpx;
							}

							.iconfont {
								line-height: 1;
								// font-size: $font-size-tag;
							}
						}
					}

					.money-wrap {
						font-weight: bold;
					}
				}

				.content-item:first-child {
					border: none;
				}

				.content-item:last-child {
					padding-bottom: 0;
				}
			}
		}

		.no-data {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				margin-top: 100rpx;
				width: 350rpx;
				height: 300rpx;
				margin-bottom: 120rpx;
			}

			text {
				font-size: $font-size-sub;
				color: $color-tip;
			}
		}
	}
</style>
